<template>
	<view class="house-select-page">
		<!-- 客户需求信息 -->

		<!-- 筛选条件 -->
		<view class="filter-section">
			<view class="filter-row">
				<view class="filter-group">
					<scroll-view class="filter-scroll" scroll-x>
						<view class="filter-container">
							<view class="filter-item" :class="{ 
									active: currentBuilding === building.value,
									recommended: isRecommendedBuilding(building.value)
								}" v-for="building in houseData" :key="building.label" @click="selectBuilding(building.value)">
								<text class="filter-text">{{ building.label}}</text>
								<view v-if="isRecommendedBuilding(building.value)" class="recommend-badge">
									推荐
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<view class="filter-row">
				<view class="filter-group">
					<scroll-view class="filter-scroll" scroll-x
						:scroll-into-view="'floor-' + curIntentionInfo.min_acceptable_floor">
						<view class="filter-container">
							<view class="filter-item" :id="'floor-' + floor.value" :class="{ 
									active: currentFloor === floor.value,
								}" v-for="floor in floorOptions" :key="floor.value" @click="selectFloor(floor.value)">
								<text class="filter-text">{{ floor.text }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 房屋平面图 -->
		<view class="layout-section">
			<view class="section-header">
				<text class="section-title">{{ currentBuilding }}栋 {{ currentFloor }}层</text>
				<view class="legend">
					<view class="legend-item">
						<view class="color-box available"></view>
						<text>可售</text>
					</view>
					<view class="legend-item">
						<view class="color-box reserved"></view>
						<text>认购</text>
					</view>
					<view class="legend-item">
						<view class="color-box sold"></view>
						<text>签约</text>
					</view>
					<view class="legend-item">
						<view class="color-box disabled"></view>
						<text>销控</text>
					</view>
				</view>
			</view>

			<view class="layout-container" scroll-y>
				<!-- 楼层平面图 -->
				<view class="floor-plan">
					<view class="floor-layout">
						<!-- 房屋布局 -->
						<view v-if="currentFloorHouses.length > 0">
							<!-- 左侧房屋 -->
							<view class="house-row grid-container">
								<view class="house-unit" v-for="house in currentFloorHouses" :key="house._id">
									<view class="house-item" :class="selectedHouse && selectedHouse._id == house._id ? house.statusClass+' selected':house.statusClass" 
										@click="selectHouse(house)">
										<text class="house-number">{{ house.roomNumber }}</text>
										<text class="house-type">{{ house.roomLayout }} {{ house.area }}㎡</text>
										<!-- <text class="house-area">{{ house.area }}㎡</text> -->
										<text class="house-price">{{ formatPrice(house.totalPrice) }}</text>
										<view v-if="selectedHouse && selectedHouse._id === house._id" class="select-indicator">
											<uni-icons v-if="selectedHouse && selectedHouse._id === house._id"
												type="checkmark" size="16" color="#fff"></uni-icons>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 无房屋数据提示 -->
						<view v-else class="no-houses">
							<uni-icons type="home" size="60" color="#ccc"></uni-icons>
							<text class="no-houses-text">该楼层暂无房屋数据</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选中的房屋信息 -->
		<view v-if="selectedHouse" class="selected-house-section">
			<view class="selected-house-card">
				<view class="card-header">
					<text class="card-title">已选房屋 </text>
					<view class="status-tags">
						<text class="house-status-tag" :class="selectedHouse.statusClass">
							{{ getStatusText(selectedHouse.status) }} {{selectedHouse.status}}
						</text>
					</view>
				</view>
				<view class="house-details">
					<!-- <view class="detail-row">
						<text class="detail-label">房屋编号</text>
						<text class="detail-value">{{ selectedHouse.propertyCode }}</text>
					</view> -->
					<view class="detail-row">
						<text class="detail-label">位置</text>
						<text class="detail-value">{{ selectedHouse.buildingNumber }}栋{{ selectedHouse.roomNumber }}室</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">户型面积</text>
						<text class="detail-value">{{ selectedHouse.roomLayout }} | {{ selectedHouse.area }}㎡</text>
					</view>
					<!-- <view class="detail-row">
						<text class="detail-label">朝向</text>
						<text class="detail-value">{{ getOrientationText(selectedHouse.orientation) }}</text>
					</view> -->
					<view class="detail-row">
						<text class="detail-label">备注</text>
						<text class="detail-value">{{ selectedHouse.description }}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">总价</text>
						<text class="detail-value price">{{ $formatNumber(selectedHouse.totalPrice)}}</text>
					</view>
					<view class="detail-row">
						<text class="detail-label">单价</text>
						<text class="detail-value">{{ selectedHouse.unitPrice }}元/㎡</text>
					</view>
				<!-- 	<view class="detail-row">
						<view class="detail-label" style="padding-right: 10rpx;">申请折扣</view>
						<uni-data-checkbox class="check-price" v-model="applyZK" :localdata="range"
							@change="change"></uni-data-checkbox>
						<uni-easyinput type="number" class="detail-value price" style="text-align: right;;" v-model="applyPrice"></uni-easyinput>
					</view> -->
					<!-- <view class="detail-row" v-if="isRecommendedHouse(selectedHouse)">
						<text class="detail-label match-info">✅ 符合客户预算和户型需求</text>
					</view>
					<view class="detail-row" v-else>
						<text class="detail-label mismatch-info">⚠️ 超出客户预算或户型不匹配</text>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 客户信息
				customerInfo: {},
				// 客户意向信息
				curIntentionInfo: {},
				customerId: '',
				intentionId: '',

				// 当前选择
				currentBuilding: '1',
				currentFloor: '1',
				selectedHouse: null,

				houseData:[{
					children:[]
				}],

				range: [{
					"value": 0.99,
					"text": "99折"
				}, {
					"value": 0.98,
					"text": "98折"
				}, {
					"value": 0.97,
					"text": "97折"
				}],
				applyZK: '',
				_id:'',
				lastHouseId:''
			}
		},
		computed: {
			// 楼层选项（显示所有楼层1-18层）
			floorOptions() {
				let curBuildIng = this.houseData.filter(buildIng=>{
					return buildIng.value == this.currentBuilding
				})
				let floors = []
				if(curBuildIng[0] && curBuildIng[0].children.length){
					curBuildIng[0].children.map(item=>{
						floors.push({
							value:item.value * 1,
							text:item.label,
							disabled:item.disabled
						})
					})
				}
				floors.sort((a,b)=>{return a.value - b.value})
				return floors
			},

			// 当前楼层的房屋
			currentFloorHouses() {
				let curBuildIng = this.houseData.filter(buildIng=>{
					return buildIng.value == this.currentBuilding
				})
				let houses = []
				if(curBuildIng[0] && curBuildIng[0].children.length){
					curBuildIng[0].children.map(item=>{
						if(this.currentFloor == item.value*1){
							houses = item.houses
						}
					})
				}
				houses.sort((a,b)=>{return a.unitNumber-b.unitNumber})
				return houses
			},


			// 右侧房屋（双号）
			applyPrice() {
				console.log('this.selectHous', this.selectHous, this.applyZK)
				if (!this.selectedHouse || !this.applyZK) {
					return '0.00'
				}

				// 确保值是数字类型
				const housePrice = Number(this.selectedHouse.totalPrice) || 0
				const discount = Number(this.applyZK) || 0

				// 计算并格式化结果
				const result = housePrice * discount

				console.log('applyPrice', result)
				// 使用 toFixed(2) 而不是 fixed(2)
				return result.toFixed(2)
			}
		},
		async onLoad(options) {
			await this.getHouseList()
		},
		methods: {
			change(e) {
				this.applyZK = e.detail.value
			},
			// 检查是否是推荐楼栋
			isRecommendedBuilding(building) {
				if (!this.curIntentionInfo.preferred_buildings) return false;
				// return this.curIntentionInfo.preferred_buildings.includes(building + '号楼');
			},

			// 选择楼栋
			selectBuilding(building) {
				this.currentBuilding = building;
				this.selectedHouse = null;
			},

			// 选择楼层 - 移除楼层可用性检查，所有楼层都可以选择
			selectFloor(floor) {
				this.currentFloor = floor;
				this.selectedHouse = null;
			},

			// 选择房屋
			selectHouse(house) {
				this.selectedHouse = house;
			},

			// 判断房屋是否符合客户需求
			isRecommendedHouse(house) {
				return
				if (!this.curIntentionInfo.total_budget || !this.curIntentionInfo.preferred_unit_types) {
					return false;
				}

				// 检查预算（在预算范围内）
				const minBudget = parseFloat(this.curIntentionInfo.total_budget.min) * 10000;
				const maxBudget = parseFloat(this.curIntentionInfo.total_budget.max) * 10000;
				const withinBudget = house.totalPrice >= minBudget && house.totalPrice <= maxBudget;

				// 检查户型
				const layoutMatch = this.curIntentionInfo.preferred_unit_types.some(type =>
					house.roomLayout?.includes(type.replace('室', '室').replace('厅', '厅'))
				);

				// 检查楼栋
				const buildingMatch = this.curIntentionInfo.preferred_buildings.includes(house.buildingNumber + '号楼');

				// 检查楼层
				const floorNum = parseInt(house.floor);
				const minFloor = parseInt(this.curIntentionInfo.min_acceptable_floor);
				const maxFloor = parseInt(this.curIntentionInfo.max_acceptable_floor);
				const floorMatch = floorNum >= minFloor && floorNum <= maxFloor;

				// 返回是否推荐（预算范围内且户型匹配）
				return withinBudget && layoutMatch && buildingMatch && floorMatch;
			},

			// 获取房屋状态样式类
			getHouseStatusClass(house) {
				let statusClass = {
					1: 'available', // 可售
					2: 'reserved', // 已预订
					3: 'sold',
					4:'disabled'// 已售
				} [house.status] || 'available';

				return statusClass;
			},

			// 获取状态文本
			getStatusText(status) {
				const statusMap = {
					1: '可售',
					2: '认购',
					3: '签约',
					4:'销控'
				};
				return statusMap[status] || '未知';
			},

			// 获取状态样式类
			getStatusClass(h) {
				if(h._id == this.lastHouseId){
					h.status = 1
				}
				const classMap = {
					1: 'status-available',
					2: 'status-reserved',
					3: 'status-sold'
				};
				return classMap[h.status] || 'status-unknown';
			},

			// 获取朝向文本
			getOrientationText(orientation) {
				const orientationMap = {
					1: '东',
					2: '南',
					3: '西',
					4: '北'
				};
				return orientationMap[orientation] || '未知';
			},

			// 格式化价格
			formatPrice(price) {
				if (!price) return '￥0';
				if (price >= 10000) {
					return `￥${(price / 10000).toFixed(1)}万`;
				}
				return `￥${price.toLocaleString()}`;
			},

			// 重置选择
			resetSelection() {
				this.selectedHouse = null;
			},

			// 确认选择
			confirmSelection() {
				if (!this.applyPrice) {
					uni.showToast({
						title: '请先选填写价格',
						icon: 'none'
					});
					return;
				}
				if (!this.selectedHouse) {
					uni.showToast({
						title: '请先选择房屋',
						icon: 'none'
					});
					return;
				}

				uni.showModal({
					title: '确认选择',
					content: `确定为客户【${this.customerInfo.customerName}】,选择 ${this.selectedHouse.buildingNumber}栋${this.selectedHouse.roomNumber}室,总价${this.applyPrice}吗？`,
					success: (res) => {
						if (res.confirm) {
							this.reserveHouse();
						}
					}
				});
			},

			// 预订房屋
			async reserveHouse() {
				try {
					const result = await this.$cloudOBjAjax('house-reservation', 'reserve', {
						houseId:this.selectedHouse._id,
						customerId: this.customerInfo._id,
						applyPrice: this.applyPrice,
						applyZK: this.applyZK,
						_id:this._id
					})
					// 这里调用实际的预订接口

					if (result.result.code === 200) {
						uni.showToast({
							title: '预订成功',
							icon: 'success'
						});

						// to do 添加lifeCyle
						const desc =
							`客户 ${this.customerInfo.customerName} 选择 ${this.selectedHouse.buildingNumber}栋${this.selectedHouse.roomNumber}室,总价${this.applyPrice}吗`
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						throw new Error(result.result.message);
					}

				} catch (err) {

					console.error('预订房屋失败:', err);
					uni.showToast({
						title: '预订失败，请重试',
						icon: 'none'
					});
				}
			},
			getHouseList(houseId) {
			    this.$cloudOBjAjax('sunny-house', 'getHouseList', {
			        pageSize: 1000,
			    }).then(res => {
					
					res.map(item=>{

						return item
					})
			        const treeData = this.buildTreeData(res,houseId);
					this.houseData = treeData
					
					console.log('treeData',treeData)
					
					this.currentBuilding = treeData[0].value
					
					this.currentFloor = treeData[0].children[0].value
			        console.log('树形数据:', treeData);
			        // 这里可以将 treeData 绑定到您的组件数据中
			    });
			},
			
			// 构建树形数据结构
			buildTreeData(houses,houseId) {
			    const buildingMap = new Map();
			    const floorMap = new Map();
			    
			    // 先分组
			    houses.map(item => {
			        const buildKey = `building${item.buildingNumber}`;
			        const floorKey = `${buildKey}_floor${item.floor}`;
			        
			        // 楼栋分组
			        if (!buildingMap.has(buildKey)) {
			            buildingMap.set(buildKey, []);
			        }
			        buildingMap.get(buildKey).push(item);
			        
			        // 楼层分组
			        if (!floorMap.has(floorKey)) {
			            floorMap.set(floorKey, []);
			        }
			        floorMap.get(floorKey).push(item);
					if(this._id && houseId == item._id){
						this.selectedHouse = {...item}
					}
					item.statusClass = this.getHouseStatusClass(item)
			    });
			    
			    // 构建树形结构
			    const treeData = [];
			    
			    // 遍历楼栋
			    buildingMap.forEach((buildingHouses, buildKey) => {
			        const buildingNumber = buildKey.replace('building', '');
			        const buildingNode = {
			            label: `${buildingNumber}栋`,
			            value: `${buildingNumber}`,
			            type: 'building',
			            children: []
			        };
			        
			        // 获取该楼栋的所有楼层
			        const floorKeys = Array.from(floorMap.keys()).filter(key => 
			            key.startsWith(buildKey)
			        );
			        
			        // 遍历楼层
			        floorKeys.forEach(floorKey => {
			            const floorHouses = floorMap.get(floorKey);
			            const floorNumber = floorKey.split('floor')[1];
			            
			            // 检查该楼层是否全部为 status 2 或 3
			            const isDisabled = floorHouses.every(house => 
			                house.status === 2 || house.status === 3
			            );
			            
			            const floorNode = {
			                label: `${floorNumber}层`,
			                value: `${floorNumber}`,
			                type: 'floor',
			                disabled: isDisabled,
			                houses: floorHouses,
			                // 可以根据需要添加推荐标记
			                isRecommended: this.checkIsRecommended(floorHouses)
			            };
			            
			            buildingNode.children.push(floorNode);
			        });
			        
			        // 按楼层数字排序
			        buildingNode.children.sort((a, b) => {
			            const aFloor = parseInt(a.label);
			            const bFloor = parseInt(b.label);
			            return bFloor - aFloor; // 降序排列
			        });
			        
			        treeData.push(buildingNode);
			    });
			    
			    // 按楼栋数字排序
			    treeData.sort((a, b) => {
			        const aBuilding = parseInt(a.label);
			        const bBuilding = parseInt(b.label);
			        return aBuilding - bBuilding; // 升序排列
			    });
			    
			    return treeData;
			},
			
			// 检查是否推荐（您可以根据实际业务逻辑调整）
			checkIsRecommended(houses) {
			    // 示例逻辑：如果有可用的房屋(status=1)则推荐
			    return houses.some(house => house.status === 1);
			}
		}
	}
	
	// 恪守 蓝
	//认购 已售红
	// 销控 灰色
	// 签约 浅紫色
</script>

<style scoped lang="scss">
	.house-select-page {
		background-color: #f8f9fa;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.customer-demand-section {
		padding: 20rpx;
	}

	.demand-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.demand-header {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.demand-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.demand-content {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 16rpx;
	}

	.demand-item {
		display: flex;
		align-items: center;
	}

	.demand-label {
		font-size: 24rpx;
		color: #666;
		font-weight: 500;
	}

	.demand-value {
		font-size: 24rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.filter-section {
		background: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.filter-row {
		margin-bottom: 20rpx;
	}

	.filter-row:last-child {
		margin-bottom: 0;
	}

	.filter-scroll {
		white-space: nowrap;
	}

	.filter-container {
		display: inline-flex;
		gap: 16rpx;
	}

	.filter-item {
		position: relative;
		padding: 16rpx 24rpx;
		background: #f8f9fa;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #666;
		transition: all 0.3s;
		flex-shrink: 0;
	}

	.filter-item.active {
		background: #ff6b35;
		color: #fff;
	}

	.filter-item.recommended {
		border: 2rpx solid #ff6b35;
	}

	.filter-text {
		font-weight: 500;
	}

	.recommend-badge {
		position: absolute;
		top: -8rpx;
		right: -8rpx;
		background: #ff6b35;
		color: #fff;
		padding: 4rpx 8rpx;
		border-radius: 12rpx;
		font-size: 18rpx;
	}

	.layout-section {
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		flex-shrink: 0;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}

	.legend {
		display: flex;
		gap: 16rpx;
		flex-wrap: wrap;
	}

	.legend-item {
		display: flex;
		align-items: center;
		gap: 6rpx;
		font-size: 20rpx;
		color: #666;
	}

	.color-box {
		width: 20rpx;
		height: 20rpx;
		border-radius: 4rpx;
	}

	.color-box.available {
		background: #36A0FF;
	}


	.color-box.sold {
		background: #FF00FF;
	}

	.color-box.reserved {
		background:#DE5543;
	}

	.color-box.recommended {
		background: #1890ff;
	}
	
	.color-box.disabled {
		background: #999;
	}
	

	.layout-container {
		padding: 30rpx;
		flex: 1;
		width: calc(100% - 60rpx);
	}

	.floor-plan {
		/* background: #f8f9fa; */
		border-radius: 12rpx;
		/* padding: 30rpx; */
		/* min-height: 400rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.floor-layout {
		width: 100%;
	}

	.houses-container {
		display: flex;
		gap: 40rpx;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		/* 3列，每列等宽 */
		gap: 10px;
		/* 设置间隙 */
	}

	.house-row {
		/* flex: 1;
		display: flex;
		flex-direction: column;
		gap: 20rpx; */
	}

	.house-unit {
		height: 120rpx;
	}

	.house-item {
		position: relative;
		height: 100%;
		border: 2rpx solid #e8e8e8;
		border-radius: 12rpx;
		/* padding: 20rpx; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		transition: all 0.3s;
		cursor: pointer;
		&.disabled{
			background-color: #999;
			color:white;
		}
	}

	.house-item.available {
		background: #36A0FF;
		border-color: #36A0FF;
		color:white;
	}


	.house-item.available.recommended {
		background: #e6f7ff;
		border-color: #91d5ff;
	}


	.house-item.sold {
		background: #CC33CC;
		border-color: #CC33CC;
		color: white;
	}

	.house-item.reserved {
		background: #DE5543;
		border-color: #DE5543;
		color: white;
	}

	.house-number {
		font-size: 28rpx;
		font-weight: bold;
	}

	.house-type,
	.house-area,
	.house-price {
		font-size: 20rpx;
	}

	.select-indicator {
		position: absolute;
		top: 8rpx;
		right: 8rpx;
		width: 32rpx;
		height: 32rpx;
		background: #52c41a;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.recommend-house-tag {
		position: absolute;
		top: 8rpx;
		left: 8rpx;
		background: #1890ff;
		color: #fff;
		padding: 4rpx 8rpx;
		border-radius: 12rpx;
		font-size: 18rpx;
	}

	.corridor {
		width: 80rpx;
		background: #e8e8e8;
		border-radius: 8rpx;
	}

	/* 无房屋数据样式 */
	.no-houses {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60rpx;
		color: #999;
	}

	.no-houses-text {
		font-size: 28rpx;
		margin-top: 20rpx;
		color: #999;
	}

	.selected-house-section {
		background: #fff;
		margin: 0 20rpx 20rpx;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.selected-house-card {
		padding: 30rpx;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.status-tags {
		display: flex;
		gap: 12rpx;
	}

	.house-status-tag {
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		color: #333;
		&.sold {
			background: #FF00FF;
			color:#fff;
		}
		&.reserved {
			background: #DE5543;
			color:#fff;
		}
		&.available {
			background: #36A0FF;
			color:#fff;
		}
		&.disabled {
			background: #999;
			color:#fff;
		}
	}

	.status-available {
		background: #52c41a;
	}

	.status-reserved {
		background: #fa8c16;
	}

	.status-sold {
		background: #C83327;
	}
	
	.status-disabled {
		background: #999;
	}

	.recommended-tag {
		background: #1890ff;
	}

	.house-details {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 0;
		border-bottom: 1rpx solid #f8f9fa;
	}

	.detail-row:last-child {
		border-bottom: none;
	}

	.detail-label {
		font-size: 26rpx;
		color: #666;
	}

	.detail-value {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.detail-value.price {
		color: #ff6b35;
		font-weight: bold;
		font-size: 28rpx;
	}

	.match-info {
		color: #52c41a;
		font-weight: 500;
		width: 100%;
		text-align: center;
	}

	.mismatch-info {
		color: #fa8c16;
		font-weight: 500;
		width: 100%;
		text-align: center;
	}

	.action-bar {
		background: #fff;
		padding: 20rpx 30rpx;
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.action-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.selected-info {
		display: flex;
		flex-direction: column;
		gap: 8rpx;
		flex: 1;
	}

	.selected-text {
		font-size: 26rpx;
		color: #333;
		font-weight: 500;
	}

	.selected-price {
		font-size: 28rpx;
		color: #ff6b35;
		font-weight: bold;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}

	.action-btn {
		border: none;
		border-radius: 12rpx;
		padding: 20rpx 32rpx;
		font-size: 28rpx;
		font-weight: bold;
		flex-shrink: 0;
	}

	.reset-btn {
		background: #f8f9fa;
		color: #666;
		border: 2rpx solid #e9ecef;
	}

	.confirm-btn {
		background: #ff6b35;
		color: #fff;
	}

	.confirm-btn:disabled {
		background: #ccc;
		color: #999;
	}


	::v-deep .check-price {
		&.uni-data-checklist {
			padding: 10rpx 0;

			.checklist-group {
				justify-content: flex-end;
			}

			.checklist-box {
				margin-right: 20rpx;

				&.is-checked {
					color: #dd524d;

					.radio__inner {
						border-color: #dd524d !important;

						.radio__inner-icon {
							background-color: #dd524d !important;
						}
					}

					.checklist-text {
						color: #dd524d !important;
					}
				}
			}
		}
	}
</style>